import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT, STATUSBAR_HEIGHT, NAVIGATIONBAR_NAVIGATION_HEIGHT } from 'src/utils/ScreenUtil'
import { connect } from 'react-redux'
import { UPDATE_IM } from 'src/store/actions/im'
import BasePage from 'src/pageP/base/base-page/index'
import MessageComponent from 'src/pageC/message/message-page/components/MessageComponent'

const mapActiontoProps = dispatch => ({
  updateImState (payload) {
    dispatch({
      type: UPDATE_IM,
      payload: {
        ...payload
      }
    })
  }
})

@connect(
  ({ userinfo, im, landmark }) => ({
    userinfo,
    landmark,
    ...im
  }),
  mapActiontoProps
)
class MessagePage extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      recommendTitle: {}
    }
  }

  childRender () {
    const { contactList, navigation, updateImState, userinfo: { userId, C: { userId: realUserId } }, landmark } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.title}>
          <View style={styles.titleItem}>
            <Text style={styles.titleContent}>消息</Text>
            <View style={styles.tabItemDot}></View>
          </View>
        </View>
        <MessageComponent
          messageList={contactList}
          updateImState={updateImState}
          navigatePage={'ChatPage'}
          userId={userId}
          realUserId={realUserId}
          landmark={landmark}
          navigation={navigation}
          notLoginTip={'登录后才可与企业沟通哦～'}/>
      </View>
    )
  }
}

export default MessagePage

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: STATUSBAR_HEIGHT,
    height: NAVIGATIONBAR_NAVIGATION_HEIGHT
  },
  title: {
    flexDirection: 'row',
    alignItems: 'center',
    height: NAVIGATIONBAR_NAVIGATION_HEIGHT
  },
  titleItem: {
    paddingLeft: ScaleS(20),
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  tabItemDot: {
    width: ScaleS(9),
    height: ScaleS(2),
    borderRadius: ScaleS(1),
    backgroundColor: '#3c3c3c',
    marginTop: ScaleS(8)
  },
  titleContent: {
    fontSize: ScaleT(17),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  titleNum: {
    fontSize: ScaleT(18),
    fontWeight: 'bold',
    color: '#000000',
    marginLeft: ScaleS(6)
  },
  flatList: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  chatItem: {
    alignItems: 'center',
    flexDirection: 'row',
    width: ScaleS(375),
    paddingHorizontal: ScaleS(20),
    backgroundColor: '#ffffff',
    marginVertical: ScaleS(20)
  },
  rightBtn: {
    position: 'absolute',
    top: ScaleS(20),
    right: 0,
    height: ScaleS(52),
    width: ScaleS(75),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
    color: 'white'
  },
  headerImg: {
    width: ScaleS(52),
    height: ScaleS(52),
    borderRadius: ScaleS(26),
    marginRight: ScaleS(14),
    // backgroundColor: '#cccccc',
    resizeMode: 'cover'
  },
  itemMiddle: {
    height: ScaleS(52),
    justifyContent: 'space-between',
    flex: 1
  },
  itemMiddleText: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    width: ScaleS(200)
  },
  itemName: {
    fontSize: ScaleT(18),
    fontWeight: '600',
    color: '#000',
    marginRight: ScaleS(15)
  },
  itemCompany: {
    fontSize: ScaleT(14),
    color: '#999999',
    overflow: 'hidden',
    flex: 1
  },
  itemMsg: {
    width: ScaleS(200),
    // overflow: 'hidden',
    fontSize: ScaleT(14),
    color: '#999999'
  },
  itemMsgTime: {
    fontSize: ScaleT(14),
    color: '#D1D1D1',
    alignSelf: 'flex-start'
  },
  unread: {
    position: 'absolute',
    bottom: ScaleS(0),
    right: ScaleS(20),
    width: ScaleS(16),
    height: ScaleS(16),
    backgroundColor: '#EF5E6A',
    borderRadius: ScaleS(8),
    alignItems: 'center',
    justifyContent: 'center'
  },
  unreadCount: {
    fontSize: ScaleT(10),
    fontWeight: '500',
    color: '#FFFFFF'
  }
})
